<template>

	<view layadmin-themealias="default" class="layui-layout-body" style="">
		<div class="layadmin-tabspage-none" :class="hideMenu?'layadmin-side-shrink':''">
			<div class="layui-layout layui-layout-admin">
				<div class="layui-header">
					<!-- 头部区域 -->
					<ul class="layui-nav layui-layout-left">
						<li class="layui-nav-item layadmin-flexible" lay-unselect="">
							<a href="javascript:;" @click="hideMenu = !hideMenu" title="侧边伸缩">
								<i class="layui-icon layui-icon-shrink-right" v-if="hideMenu == false"></i>
								<i class="layui-icon layui-icon-spread-left" v-if="hideMenu"></i>
							</a>
						</li>
						<!-- <li class="layui-nav-item layui-hide-xs" lay-unselect="">
							<a href="http://www.layui.com/admin/" target="_blank" title="前台">
								<i class="layui-icon layui-icon-website"></i>
							</a>
						</li> -->
						<li class="layui-nav-item" lay-unselect="">
							<a href="javascript:;" @click="reload" title="刷新">
								<i class="layui-icon layui-icon-refresh-3"></i>
							</a>
						</li>
						
						<span class="layui-nav-bar" style="left: 198px; top: 48px; width: 0px; opacity: 0;"></span>
					</ul>
					<ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">

						<!-- 如果有新消息，则显示小圆点 -->
						
						<li class="layui-nav-item">
							<auth url="/admin/systemMsg/list">
								<a href="javascript:;" @tap='switchPage("/pages/systemMsg/systemMsgList?tsm.isRead=0")'>
									<i class="layui-icon layui-icon-notice"></i>
									<span class="layui-badge-dot" v-if="count > 0">{{count}}</span>
								</a>
							</auth>
						</li>
						
						<li class="layui-nav-item" lay-unselect="false">
							<a href="javascript:;">
								{{admin.name}}
							</a>
						</li>

						<li class="layui-nav-item layui-hide-xs" @click="quit">
							<a href="javascript:;">
								退出
							</a>
						</li>
						<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect="">
							<a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
						</li>
						<span class="layui-nav-bar" style="left: 28px; top: 48px; width: 0px; opacity: 0;"></span>
					</ul>
				</div>

				<!-- 侧边菜单 -->
				<div class="layui-side layui-side-menu">
					<div class="layui-side-scroll">
						
						<div class="layui-logo" style="padding: 0 15px;height: 70px;">
							<image src="/static/full-logo.png" mode="aspectFit" style="width: 180px;height: 70px;"></image>
						</div>
						
						<ul class="layui-nav layui-nav-tree" style="margin-top: 70px;">
							
							<li class="layui-nav-item" :class="{'layui-nav-itemed' : curIndex == index}" v-for="( menu , index) in menuList" :key="index" v-if="menu.type == 1"> 
								<a href="javascript:;" @click="toggleMenu(index)">
									 <i class="layui-icon" :class="menu.icon"></i> 
									 <div style="position: relative;top: -7px;">{{menu.name}}</div>
									 <span class="layui-nav-more"></span>
								</a>
								<dl class="layui-nav-child" v-if="curIndex == index">
									<dd :class="{'layui-this' : curPage == subMenu.key}"
									v-for="( subMenu , subIndex) in menuList" :key="subMenu.id" 
									v-if="subMenu.parentId == menu.id && subMenu.type == 2"> 
										<a href="javascript:;" @click="switchPage(subMenu.pages)">
											{{subMenu.name}}  
											<text class="pl10" v-if="subMenu.orderCount == 0 || subMenu.orderCount">（{{subMenu.orderCount}}）</text>
										</a>
									</dd>
								</dl>
							</li> 
							<span class="layui-nav-bar" style="top: 28px; height: 0px; opacity: 0;"></span>
						</ul>
						
					</div>
				</div>
				
				<!-- 主体内容 -->
				<div class="layui-body" id="LAY_app_body">
					<div class="layadmin-tabsbody-item layui-show">
						
						<div class="layui-fluid">
							<div class="layui-card">
								<div class="layui-card-header" v-if="showHeader">
									<view class="clear">
										<div class="fl">{{title}}</div>
										<div class="fr contentHeader">
											<slot name="title"></slot>
										</div>
									</view>
								</div>
								<div class="layui-card-body" style="padding: 15px;">
									
									<block v-if="loading">
										<emptyTips :loading="loading"></emptyTips>
									</block>
									<block v-else>
										<slot></slot>
									</block>
									
								</div>
								
								
							</div>
						</div>
						
						
					</div>
				</div>
				
				

				<!-- 辅助元素，一般用于移动设备下遮罩 -->
				<div class="layadmin-body-shade" layadmin-event="shade"></div>

			</div>
		</div>


		<div class="layui-layer-move"></div>
	</view>

</template>

<script>
	import kit from "../common/kit.js";
	export default {
		name: "layout",
		props: {
			title : {
				type: String,
				default: ''
			},
			addRoute : {
				type: String,
				default: ''
			},
			curPage: {
				type: String,
				default: 'index'
			},
			loading: {
				type: Boolean,
				default: false
			},
			showHeader: {
				type: Boolean,
				default: true
			}
		},

		data() {
			return {
				admin: getApp().globalData.admin,
				menuList: getApp().globalData.menuList ,
				hideMenu: false ,
				curIndex : 0 ,
				webName : getApp().globalData.title,
				count : 0 ,
				test : Date.now()
			};
		},
		
		created() {
			var that = this;
			var menuList = this.menuList || [];
			if ( menuList.length > 0) {
				that.initMenuData();
				return ;
			}
			var data = {};
			kit.get("/admin/globalData", data, function(res) {
				that.admin = res.admin;
				that.menuList = res.menuList;
				getApp().globalData.menuList = res.menuList ;
				getApp().globalData.admin = res.admin ;
				that.initMenuData();
			});	
		},
		
		watch:{
			menuList:function(e){
				this.initMenuData();
			}
		},

		methods: {
			
			initMenuData : function(e){
				var menuList = this.menuList || [];
				for (var i = 0; i < menuList.length; i++) {
					var menu =	menuList[i] ;
					if ( menu.key == this.curPage && menu.type == 2) {
						var pid = menu.parentId ;
						for (var j = 0; j < menuList.length; j++) {
							if (menuList[j].id == pid) {
								this.curIndex = j ; //一级菜单
								break ;
							}
						}
						break ;
					}
				}
			},
			
			reload : function(e){
				var url =  kit.getPageRoute();
				uni.redirectTo({
					url: url
				});
			},
			
			switchPage : function(url){
				if(url.startsWith("/#/")){
					var token = uni.getStorageSync("token");
					location.href = this.kit.myHost + url + "?sessionId=" + token ;
				}else{
					uni.navigateTo({
						url: url
					});
				}
			},
			
			toggleMenu : function(index){
				this.curIndex = this.curIndex == index ? -1 : index;
			},
			
			quit: function(e) {
				var that = this;
				var data = {};
				kit.get("/admin/logout", data, function(res) {
					uni.removeStorageSync("token");
					uni.reLaunch({
						url: "/pages/login/login"
					});
				});
			},
		}
	}
</script>
<style>
	.layui-side-menu,
	.layadmin-pagetabs .layui-tab-title li:after,
	.layadmin-pagetabs .layui-tab-title li.layui-this:after,
	.layui-layer-admin .layui-layer-title,
	.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child {
		background-color: #20222A !important;
	}

	.layui-nav-tree .layui-this,
	.layui-nav-tree .layui-this>a,
	.layui-nav-tree .layui-nav-child dd.layui-this,
	.layui-nav-tree .layui-nav-child dd.layui-this a {
		background-color: #5d83f7 !important;
	}

	.layui-layout-admin .layui-logo {
		background-color: #20222A !important;
	}
	
</style>

